import React from 'react'
import ContentAdd from 'material-ui/svg-icons/content/add';
import ContentClear from 'material-ui/svg-icons/content/clear';
import Paper from 'material-ui/Paper';
import IconButton from 'material-ui/IconButton';

import Options from './Options';

const myStyles = {
    row: {display: 'flex', alignItems: 'center'},
    twiceRem: {height: '2rem'},
}

export default class QuestionCards extends React.Component {
    constructor(props) {
        super(props)
    }

    addOption() {
        //TODO: Add a dialog
    }

    render() {
        const questionCards = this.props.questions.map((question, index) => {
            return (
                <Paper key={index}>
                    <div style={myStyles.row}>
                        <h3>{index + 1}.{question.title}</h3>
                        <IconButton onClick={() => {
                            this.props.removeQuestion(index)
                        }} children={<ContentClear/>}/>
                    </div>

                    <Options options={question.options}/>

                    <div>
                        <IconButton onClick={this.addOption} children={<ContentAdd/>}/>
                    </div>
                </Paper>
            )
        })

        return (
            <div>{questionCards}</div>
        )
    }
}
